<template>
	<view class="content">
		<view class="item clear-both" @tap="chooseCity">
			<view class="float-l fs16 color3 font-weight item1">活动城市</view>
			<view class="fs16 float-l colorc9 item2">请选择城市</view>
			<image src="http://iph.href.lu/10x10" mode="aspectFill" class="item3 float-r"></image>
		</view>
		<view class="item clear-both">
			<view class="float-l fs16 color3 font-weight item1">活动地址</view>
			<view class="fs16 float-l colorc9 item2">请选择地址</view>
			<image src="http://iph.href.lu/10x10" mode="aspectFill" class="item3 float-r"></image>
		</view>
		<view class="item clear-both bbnone">
			<view class="float-l fs16 color3 font-weight item1">门牌号</view>
			<input type="text" class="fs16 color3 item2 float-l item4" placeholder="详细地址，例：12号楼3层301室" placeholder-class="colorc9" />
		</view>
		<view class="border"></view>
		<view class="item clear-both" @tap="chooseTime">
			<view class="float-l fs16 color3 font-weight item1">活动时间</view>
			<view class="fs16 float-l colorc9 item2">请选择活动时间</view>
			<image src="http://iph.href.lu/10x10" mode="aspectFill" class="item3 float-r"></image>
		</view>
		<view class="item clear-both">
			<view class="float-l fs16 color3 font-weight item1">活动人数</view>
			<input type="number" class="fs16 color3 item2 float-l item4" placeholder="请填写参与活动的人数" placeholder-class="colorc9" />
		</view>
		<view class="item clear-both bbnone">
			<view class="float-l fs16 color3 font-weight item1">活动预算</view>
			<input type="text" class="fs16 color3 item2 float-l item4" placeholder="请填写活动预算金额" placeholder-class="colorc9" />
		</view>
		<view class="border"></view>
		<view class="item clear-both">
			<view class="float-l fs16 color3 font-weight item1">联系人</view>
			<input type="text" class="fs16 color3 item2 float-l item5" placeholder="请填写姓名" placeholder-class="colorc9" />
			<view class="fs14 tag float-l tag1 tagact">女士</view>
			<view class="fs14 tag float-l">先生</view>
		</view>
		<view class="item clear-both bbnone">
			<view class="float-l fs16 color3 font-weight item1">手机号</view>
			<input type="number" class="fs16 color3 item2 float-l item4" placeholder="请填写手机号码" placeholder-class="colorc9"
			 maxlength="11" />
		</view>
		<view class="border"></view>
		<view class="info">
			<view class="fs16 color3 font-weight title">服务简介</view>
			<view class="fs13 color9">提供生日宴、庆生宴、婚宴、年会、酒会、派对、座谈会、下午茶一站式服务，信息提交后我们会尽快与您取得联系。</view>
		</view>
		<view class="btn colorf fs18 font-weight">提交申请</view>

		<view class="main" @touchmove.stop.prevent v-show="city||time" @tap="cleoseCity">
			<!--选择城市-->
			<view class="white-box2" v-show="city">
				<view class="search">
					<image src="../../static/tabbar/index/search.png" mode="aspectFill" class="img float-l"></image>
					<view class="text fs15 float-l font-weight">搜索</view>
				</view>
				<view class="box">
					<view class="clear-both boxs">
						<view class="title fs13 color9">当前城市</view>
						<view class="boxitem fs14 color3 float-l text-over">上海</view>
					</view>
					<view class="clear-both boxs">
						<view class="title fs13 color9">已开通服务城市</view>
						<view class="boxitem fs14 color3 float-l text-over">上海</view>
						<view class="boxitem fs14 color3 float-l text-over">上海</view>
						<view class="boxitem fs14 color3 float-l text-over">上海</view>
						<view class="boxitem fs14 color3 float-l text-over">上海</view>
						<view class="boxitem fs14 color3 float-l text-over">上海</view>
						<view class="boxitem fs14 color3 float-l text-over">上海上海上海上海</view>
					</view>
				</view>
			</view>
			<!--选择活动时间-->
			<view class="white-box" v-show="time">
				<view class="title clear-both">
					<view class="float-l fs18 color3 font-weight">选择活动时间</view>
					<view class="float-r fs16 colorFF6" @click="closeTime">关闭</view>
				</view>
				<view class="scroll">
					<scroll-view scroll-y="true" class="scroll-left scrollbarNone">
						<view :class="['scroll-left-item fs16',{'act':index==0}]" v-for="(item,index) in timeList" :key="index">{{item.time}}</view>
					</scroll-view>
					<scroll-view scroll-y="true" class="scroll-right scrollbarNone" :scroll-top="scrollTop">
						<view class="scroll-right-item fs16" v-for="(item,index) in timeList2" :key="index">{{item.time}}</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				Time: 0,
				time:false,
				city:false,
				timeList: [{
					time: '2019-06-01'
				}, {
					time: '2019-06-01'
				}, {
					time: '2019-06-01'
				}, {
					time: '2019-06-01'
				}, {
					time: '2019-06-01'
				}, {
					time: '2019-06-01'
				}, {
					time: '2019-06-01'
				}, {
					time: '2019-06-01'
				}, {
					time: '2019-06-01'
				}, {
					time: '2019-06-01'
				}, {
					time: '2019-06-01'
				}, {
					time: '2019-06-01'
				}, ],
				timeList2: [{
					time: '10:00-11:00'
				}, {
					time: '10:00-11:00'
				}, {
					time: '10:00-11:00'
				}, {
					time: '10:00-11:00'
				}, {
					time: '10:00-11:00'
				}, {
					time: '10:00-11:00'
				}, {
					time: '10:00-11:00'
				}, {
					time: '10:00-11:00'
				}, {
					time: '10:00-11:00'
				}]
			};
		},
		methods: {
			chooseTime:function(){
				this.time=true;
			},
			closeTime:function(){
				this.time=false;
			},
			chooseCity:function(){
				this.city=true;
			},
			cleoseCity:function(){
				this.city=false;
			}
		},
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss">
	.content {
		padding-bottom: 13.8667vw;
		.item {
			padding: 4vw 0;
			margin: 0 4.2667vw;
			border-bottom: 2upx solid #F5F5F5;

			.item1 {
				height: 5.8667vw;
				line-height: 5.8667vw;
				width: 17vw;
				margin-right: 3.7334vw;
				white-space: nowrap;
			}

			.item2 {
				height: 5.8667vw;
				line-height: 5.8667vw;
			}

			.item3 {
				width: 5.8667vw;
				height: 5.8667vw;
				display: block;
			}

			.item4 {
				width: 70.733vw;
			}

			.item5 {
				width: 22vw;
			}

			.tag {
				width: 18.667vw;
				height: 7.4667vw;
				line-height: 7.4667vw;
				text-align: center;
				border: 2upx solid #E8E8E8;
				border-radius: 1vw;
				color: #BCBCBC;
			}

			.tag1 {
				margin-left: 7vw;
				margin-right: 2.6vw;
			}

			.tagact {
				border: 2upx solid #00449F;
				color: #00449F;
			}
		}

		.border {
			width: 100%;
			height: 2.667vw;
			background: #FAFAFA;
		}

		.bbnone {
			border-bottom: none;
		}

		.info {
			padding: 4.2667vw 4.2667vw 7.4667vw 4.2667vw;

			.title {
				margin-bottom: 1.6vw;
			}
		}

		.btn {
			width: 100%;
			height: 13.8667vw;
			line-height: 13.8667vw;
			text-align: center;
			background: #00449F;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 999;
		}

		.main {
			width: 100%;
			height: 100%;
			position: fixed;
			z-index: 99999;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.5);
			.white-box2{
				position: absolute;
				left: 0;
				background: #fff;
				width: 100%;
				top: 0;
				animation: top .4s;
				.search{
					width:91.4667vw;
					height: 9.334vw;
					background: #f2f2f2;
					margin: 3.4667vw auto;
					.img{
						width: 5.5vw;
						height:5.5vw;
						margin-right: 1.6vw;
						margin-left: 3.2vw;
						margin-top: 1.917vw;
					}
					.text{
						color: #9C9C9D;
						height: 9.334vw;
						line-height: 9.334vw;
					}
				}
				.box{
					padding: 3.2vw 4.2667vw 0 4.2667vw;
					background: #f5f5f5;
					.boxs{
						padding-bottom: 5.334vw;
						.boxitem{
							width: 22.3994vw;
							height: 10.667vw;
							line-height: 10.667vw;
							text-align: center;
							background: #fff;
							margin: 2.667vw 2.667vw 0 0 ; 
							padding: 0 2.667vw;
						}
					}
				}
			}
			.white-box {
				position: absolute;
				left: 0;
				background: #fff;
				width: 100%;
				bottom: 0;
				animation: height .4s;

				.title {
					height: 13.8667vw;
					line-height: 13.8667vw;
					border-bottom: 2.667vw solid #fafafa;
					padding: 0 4.2667vw;
				}

				.header {
					height: 13.8667vw;
					line-height: 13.8667vw;
					margin: 0 4.2667vw;

					.mr {
						margin-right: 8.5334vw;
					}

					.header-img {
						width: 5.8667vw;
						height: 5.8667vw;
						vertical-align: middle;
					}
				}

				.scroll {
					width: 100%;
					height: 112.8vw;
					white-space: nowrap;
					display: flex;

					.scroll-left {
						width: 34vw;
						height: 100%;
						display: inline-block;
						.scroll-left-item {
							width: 100%;
							height: 14.1vw;
							text-align: center;
							line-height: 14.1vw;
							background: #f3f3f3;
						}
						.act {
							background: #fff;
							color: #00449F;
							font-weight: bold;
						}
					}

					.scroll-right {
						width: 66vw;
						height: 100%;
						display: inline-block;
						.scroll-right-item {
							width: 100%;
							height: 14.1vw;
							text-align: center;
							line-height: 14vw;
							border-bottom: 2upx solid #eee;
						}
					}
				}
			}
		}
	}
	@keyframes height{
		from{bottom: -100%;}
		to{bottom: 0;}
	}
	@keyframes top{
		from{top: -100%;}
		to{top: 0;}
	}
</style>
